<template>
  <div class="roster-container">
    <!-- 顶部区域 -->
    <div class="header flex">
      <div class="selecte-section flex">
        <div class="selecte-wrap flex">
          <img src="@/assets/images/partment.png" alt class="partment-icon" />
          <div class="selecte-title">行政部门</div>
          <Icon type="md-arrow-dropdown" class="dropdown" size="20" />
        </div>
        <Input search enter-button placeholder="搜索报表、报表描述" class="selecte-section-search" />
      </div>
      <div class="right flex">
        <Button type="success" class="add-btn" @click="addEmployee">发送生日祝福</Button>
        <Dropdown style="margin-left: 20px">
         <Button class="more-btn">>
            更多功能
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem>批量删除员工</DropdownItem>
            <DropdownItem>回收站</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
    </div>

    <!-- sms info -->
    <div class="sms-info">
      
        <span class="title">当前企业短信额度：</span>
        <span class="balance">0条</span>
        <span class="textLink">购买更多?</span>
        <span class="textLink last">查看发送记录</span>
      
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <ul class="table-actions flex">
        <li class="table-action-item">
          刷新
          <Icon type="ios-refresh" size="18" />
        </li>
        <li class="table-action-item" @click="triggerTableTitle">选择表头</li>
        <li class="table-action-item">
          <Dropdown>
            <div>
              按部门排序
              <Icon type="ios-arrow-down"></Icon>
            </div>
            <DropdownMenu slot="list">
              <DropdownItem>按岗位职级排序</DropdownItem>
              <DropdownItem>按最早入职排序</DropdownItem>
              <DropdownItem>按最近入职排序</DropdownItem>
              <DropdownItem>工号升序</DropdownItem>
              <DropdownItem>工号降序</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </li>
        <li class="table-action-item" @click="multiEditing">批量编辑</li>
        <li class="table-action-item">导出</li>
      </ul>

      <!-- 表格 -->
      <div class="table-wrap">
        <Table width="100%" :columns="columns" :data="data4" class="table"></Table>

        <!-- 自定义表头 -->
        <div class="table-header-title none" :class="{tableTitleShowed:openTableTitle}">
          <div class="title-showed">
            <div class="table-header-item">
              <div class="header-row">
                <div class="table-item-title">已显示表头</div>
                <div class="desc">
                  可
                  <i>拖拽</i>表头调整显示顺序
                </div>
              </div>
              <div class="btns-wrap flex">
                <Button disabled class="btn-item-disabled">姓名</Button>
                <Button disabled type="primary" class="btn-item-disabled">头像</Button>
                <div class="selecte-btn btn-item">
                  <div class="btn-title">成员关系</div>
                  <Icon type="ios-close" size="18" class="delelte-btn" />
                </div>
              </div>
            </div>
            <div class="table-header-item table-header-item3">
              <div class="header-row">
                <div class="table-item-title">未选择表头</div>
                <!-- <div class="desc">
                  可
                  <i>拖拽</i>表头调整显示顺序
                </div>-->
              </div>
              <div class="btns-container flex">
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>

                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
                <div class="btn-wrap">
                  <Button class="btn-item-unselected">姓名</Button>
                  <div class="hover-add-btn none">+ 添加</div>
                </div>
              </div>
            </div>
          </div>

          <div class="footer-btns">
            <Button class="cancle-btn" @click="cancleTableTitle">取消</Button>
            <Button type="primary" class="save-btn" @click="saveTableTitle">保存</Button>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速编辑 -->
    <div class="mask none" :class="{block:rightCardCloseStatus}" @click="closeRightCard"></div>
    <div class="right-cart none" :class="{block:rightCardCloseStatus}">
      <div class="right-cart-top flex">
        <div class="right-cart-title">编辑员工信息</div>
        <Icon type="md-close" class="right-cart-close" size="24" @click="closeRightCard" />
      </div>
      <div class="right-cart-body">
        <Form :model="formItem" :label-width="110" ref="formValidate" :rules="ruleValidate">
          <div class="form-item-row">
            <FormItem label="姓名">
              <Input v-model="formItem.name" placeholder="姓名" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="工号" class="form-item">
              <Input v-model="formItem.input" placeholder="工号" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="部门" class="form-item">
              <Select v-model="formItem.select" class="form-input">
                <Option value="beijing">New York</Option>
                <Option value="shanghai">London</Option>
                <Option value="shenzhen">Sydney</Option>
              </Select>
            </FormItem>
            <Icon type="ios-add-circle-outline" size="30" class="form-option-add-btn" />
          </div>
          <div class="form-item-row">
            <FormItem label="岗位">
              <Select v-model="formItem.select" class="form-input">
                <Option value="beijing">New York</Option>
                <Option value="shanghai">London</Option>
                <Option value="shenzhen">Sydney</Option>
              </Select>
            </FormItem>
            <Icon type="ios-add-circle-outline" size="30" class="form-option-add-btn" />
          </div>
          <div class="form-item-row form-item-row2">
            <FormItem label="证件类型">
              <Select v-model="formItem.select" class="form-input">
                <Option value="beijing">New York</Option>
                <Option value="shanghai">London</Option>
                <Option value="shenzhen">Sydney</Option>
              </Select>
            </FormItem>
            <div class="form-item-tip">
              管理证件类型，
              <a>点击这里</a>
            </div>
          </div>
          <div class="form-item-row">
            <FormItem label="证件号码">
              <Input v-model="formItem.input" placeholder="岗位" class="form-input"></Input>
            </FormItem>
          </div>
          <div class="form-item-row">
            <FormItem label="手机号码">
              <Input v-model="formItem.input" placeholder="岗位" class="form-input"></Input>
            </FormItem>
          </div>
        </Form>
      </div>
      <div class="right-cart-footer">
        <Button type="primary" class="cancle-btn-border" @click="closeRightCard">取消</Button>
        <Button type="default" class="save-btn-green ml12" @click="closeRightCard">保存</Button>
      </div>
    </div>

    <!-- 快速编辑end -->
  </div>
</template>
<script>
export default {
  name: "list",
  data() {
    return {
      columns: [
        {
          title: " ",
          key: "avatar",
          width: "60",
          render: (h, params) => {
            return h("div", [
              h("img", {
                class: "avatar-table",
                attrs: {
                  src:
                    ""
                }
              })
            ]);
          }
        },
        {
          title: "姓名",
          key: "name"
        },
        {
          title: "工号",
          key: "age"
        },
        {
          title: "部门",
          key: "province"
        },
        {
          title: "岗位",
          key: "city"
        },
        {
          title: "工作性质",
          key: "city"
        },
        {
          title: "成员姓名",
          key: "city"
        },
        {
          title: "成员关系",
          key: "city"
        },
        {
          title: "工作单位",
          key: "city"
        },

        {
          title: "操作",
          key: "action",
          fixed: "right",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "text",

                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      this.openRightCard(params.index);
                    }
                  }
                },
                "快速编辑"
              )
            ]);
          }
        }
      ],
      data4: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          province: "America",
          selection: "",
          avatar: "@/assets/images/avatar-table.png",
          city: "New York",
          zip: 100000
        },
        {
          name: "Jim Green",
          age: 24,
          address: "Washington, D.C. No. 1 Lake Park",
          province: "America",
          city: "Washington, D.C.",
          zip: 100000
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          province: "Australian",
          city: "Sydney",
          zip: 100000
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          province: "Canada",
          city: "Ottawa",
          zip: 100000
        },
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          province: "America",
          city: "New York",
          zip: 100000
        },
        {
          name: "Jim Green",
          age: 24,
          address: "Washington, D.C. No. 1 Lake Park",
          province: "America",
          city: "Washington, D.C.",
          zip: 100000
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          province: "Australian",
          city: "Sydney",
          zip: 100000
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          province: "Canada",
          city: "Ottawa",
          zip: 100000
        }
      ],
      openTableTitle: false,
      formItem: {
        input: "",
        select: "",
        radio: "male",
        checkbox: [],
        switch: true,
        date: "",
        time: "",
        slider: [20, 50],
        textarea: ""
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "The name cannot be empty",
            trigger: "blur"
          }
        ],
        mail: [
          {
            required: true,
            message: "Mailbox cannot be empty",
            trigger: "blur"
          },
          {
            type: "email",
            message: "Incorrect email format",
            trigger: "blur"
          }
        ],
        city: [
          {
            required: true,
            message: "Please select the city",
            trigger: "change"
          }
        ],
        gender: [
          {
            required: true,
            message: "Please select gender",
            trigger: "change"
          }
        ],
        interest: [
          {
            required: true,
            type: "array",
            min: 1,
            message: "Choose at least one hobby",
            trigger: "change"
          },
          {
            type: "array",
            max: 2,
            message: "Choose two hobbies at best",
            trigger: "change"
          }
        ],
        date: [
          {
            required: true,
            type: "date",
            message: "Please select the date",
            trigger: "change"
          }
        ],
        time: [
          {
            required: true,
            type: "string",
            message: "Please select time",
            trigger: "change"
          }
        ],
        desc: [
          {
            required: true,
            message: "Please enter a personal introduction",
            trigger: "blur"
          },
          {
            type: "string",
            min: 20,
            message: "Introduce no less than 20 words",
            trigger: "blur"
          }
        ]
      },
      rightCardCloseStatus: false
    };
  },
  methods: {
    triggerTableTitle() {
      this.openTableTitle = true;
    },
    cancleTableTitle() {
      this.openTableTitle = false;
    },
    saveTableTitle() {
      this.openTableTitle = false;
    },
    closeRightCard() {
      this.rightCardCloseStatus = false;
    },
    openRightCard(a, b) {
      this.rightCardCloseStatus = true;
    },
    multiEditing() {
      console.log(1);
      console.log(this.columns[0].type);
      if (!this.columns[0].type && this.columns[0].type !== "selection") {
        this.columns.unshift({
          title: " ",
          key: "selection",
          type: "selection",
          width: "60"
        });
      } else {
        this.columns.shift();
      }
    },
    addEmployee() {
      this.$router.push("/personnel/relation/enrollment/add/employee");
    }
  }
};
</script>
<style lang="scss" scoped src="../index.scss"></style>